<template>
  <div class="container_wrap">
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in takeTabsList(multiLanguages)"
        :key="index"
        :label="item.label"
        :name="item.value"
      >
      </el-tab-pane>
    </el-tabs>
    <el-scrollbar :min-size="0">
      <Domain ref="domainRef" v-if="activeName === 'domainAndIp'" :multiLanguages="multiLanguages" />
      <Rtp ref="rtpRef" v-else-if="activeName === 'rtpPorts'" :multiLanguages="multiLanguages" />
      <Dns v-else :multiLanguages="multiLanguages" />
      <div class="button_wrap">
        <StepButton :multiLanguages="multiLanguages" :showButtons="['confirm']" @confirm-event="confirm" />
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { Ref, ref } from "vue";
import { takeTabsList } from "./options";
import Domain from "./Domain.vue";
import Rtp from "./Rtp.vue";
import Dns from "./Dns.vue";
import StepButton from "../common/stepButton.vue";
const props = defineProps<{
  multiLanguages: any;
}>();
const domainRef: Ref<any> = ref(null);
const rtpRef: Ref<any> = ref(null)
const activeName = ref(takeTabsList(props.multiLanguages)[0].value);
const confirm = async () => {
  const a = await domainRef.value.validate()
  console.log("a", a)
};
</script>
<style scoped lang="less">
.container_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-scrollbar {
    margin: 20px 0;
    width: 77%;
    .button_wrap {
      width: 100%;
      margin-top: 15px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
